<template>
  <div id="LabApplyItem">
    <Breadcrumb content="通知方式设置" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="通知方式">
          <Splitpanes class="area">
            <!-- 左侧列表 -->
            <Pane :size="55">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getNoticeStepList" @keyup="keyupFeeItemEnter" @search-click="getNoticeStepList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getNoticeStepList"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="handleDelete"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="sysReleaseTable" border class="mytable-scrollbar" height="auto" :scroll-y="{ enabled:true }" resizable show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="rowClick" :data="sysReleaseList" :loading="showLoading">
                  <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="stepDesc" title="步骤描述"></vxe-column>
                  <vxe-column field="releaseNa" title="通知方式"></vxe-column>
                  <vxe-column field="releaseRoleNa" title="通知角色"></vxe-column>
                  <vxe-column field="isEnable" title="是否启用" width="80" align="center" checked-value="0" unchecked-value="1">
                    <template #default="{ row }">
                      <el-tag :type="getIsStaticTagType(row)">
                        {{ getIsStaticStatusDesc(row) }}
                      </el-tag>
                    </template>
                  </vxe-column>
                  <vxe-column field="infoType" title="消息类型">
                    <template #default="{ row }">
                      {{ getmessTypeName(row) }}
                    </template>
                  </vxe-column>
                  <vxe-column field="isDelayed" title="是否延时" width="80" align="center" checked-value="0" unchecked-value="1">
                    <template #default="{ row }">
                      <el-tag :type="getIsStaticTagType(row)">
                        {{ getIsStaticStatusDesc(row) }}
                      </el-tag>
                    </template>
                  </vxe-column>
                  <vxe-column field="seq" title="排序"></vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <!-- 右侧表单信息 -->
            <Pane :size="45">
              <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                  <el-form ref="labFeeItemFormRef" :model="sysReleaseForm" label-width="110px" class="form-input-m baseForm" v-loading="showLoading" inline-message>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="步骤描述" prop="stepDesc">
                          <el-input v-model="sysReleaseForm.stepDesc" placeholder="步骤描述" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="通知方式" prop="releaseNa">
                          <SelectDataList style="width:100%" ref="employeeSelectRef" :url="'/lis/cri/release/findReleaseist'" :displayField="[
                         { title: '编码', props: 'releaseNo' }, //列标题
                          { title: '名称', props: 'releaseNa' }
                       ]" :placeholder="'点击选择通知方式'" :searchParam="{ code: 'releaseNo' }" @selectDataRow="serumGroupSelect" @clearValue="serumGroupClear" v-model="sysReleaseForm.releaseNa" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="发布角色" prop="releaseRole">
                          <SelectDataList style="width:100%" ref="employeeSelectRef" :url="'/api/sys/getRoleList'" :displayField="[
                         { title: '编码', props: 'code' }, //列标题
                          { title: '名称', props: 'roleName' }
                       ]" :placeholder="'点击选择角色'"  @selectDataRow="serumRoleSelect" @clearValue="serumRoleClear" v-model="sysReleaseForm.releaseRoleNa" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否启用" prop="isEnable">
                          <el-switch v-model="sysReleaseForm.isEnable" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="消息类型" prop="infoType">
                          <el-select v-model="sysReleaseForm.infoType" filterable placeholder="请选择工作组" style="width: 200px">
                            <el-option v-for="messType in messTypeList" :key="messType.id" :label="messType.name" :value="messType.code"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否延时" prop="isDelayed">
                          <el-switch v-model="sysReleaseForm.isDelayed" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item prop="seq" label="排序" class="input-s">
                          <el-input-number v-model="sysReleaseForm.seq" :min="0" :max="100" label="请输入顺序号"></el-input-number>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-form-item class="form-footer">
                      <template #default>
                        <el-button type="primary" @click="add()">新建</el-button>
                        <el-button type="primary" v-loading="saveLoading" @click="save()">保存</el-button>
                        <el-button type="default" @click="add()">重置</el-button>
                      </template>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import {isEmpty} from "lodash";
import { AppStore } from "@/stores/store";
import {VxeFormPropTypes} from "vxe-table";
import {IsEmpty} from "@/utils/common";
import SelectDataList from '../../../components/SelectDataList.vue';


// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let store = AppStore();

const orgList = store.userInfo.orgList;
let conWidth = ref(document.documentElement.clientWidth);
let sysReleaseList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let saveLoading = ref(false); //保存
let showDataLoading = ref(false);
let showKnowLedgeLoading = ref(false);
let form = reactive({}); //右侧基本信息表单
let messTypeList: any = reactive([]); //字典表：指控规则类型

let sysReleaseForm = reactive({
  id: '',
  stepDesc: '',
  releaseNo: '',
  releaseNa: '',
  releaseRole: '',
  releaseRoleNa: '',
  isEnable: 1,
  infoType: '',
  isDelayed: 1,
  seq: 1,
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
});
let searchValue = ref('');
let defaultProps = {
  children: 'children',
  label: 'name'
};

// 方法定义区 =============
onMounted(() => {
  getNoticeStepList();
  getDictDetailList();
});


function getDictDetailList() {
  messTypeList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
      .get(url, { params: { code: 'criMessType' } })
      .then((res: any) => {
        messTypeList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
function getmessTypeName(row) {
  // proxy.$nextTick(() => {
  if (messTypeList.length > 0) {
    const group = messTypeList.find((item) => item.code == row.infoType);
    return group ? group.name : '';
  }
}

function serumGroupSelect(row) {
  sysReleaseForm.releaseNa = row.releaseNa;
  sysReleaseForm.releaseNo = row.releaseNo;
}
function serumRoleSelect(row) {
  sysReleaseForm.releaseRole = row.code;
  sysReleaseForm.releaseRoleNa = row.roleName;
}
function serumGroupClear() {
  sysReleaseForm.releaseNo = '';
}
function serumRoleClear() {
  sysReleaseForm.releaseRole = '';
}
function getIsStaticStatusDesc(row) {
  if (row.isEnable == 1) {
    return '是';
  } else if (row.isEnable == 0) {
    return '否';
  }
}
function getIsStaticTagType(row) {
  if (row.isEnable == 1) {
    return 'success';
  } else if (row.isEnable == 0) {
    return 'danger';
  }
}


// 获取申请项目列表
function getNoticeStepList() {
  sysReleaseList.length = 0;
  showLoading.value = true;
  const url = '/lis/cri/noticeStep/findNoticeStepList';
  let obj = {
    keywords: searchValue.value,
    orgId: sysReleaseForm.orgId
  };
  proxy.$http
      .get(url, { params: obj })
      .then((res: any) => {
        sysReleaseList.push(...res.data);
        if (sysReleaseList.length > 0) {
          rowClick({
            row: sysReleaseList[0]
          });
        }else {
          add();
        }

        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}
// 删除数据
function handleDelete() {
  const selectRows = (proxy.$refs.sysReleaseTable as any).getCheckboxRecords();

  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的岗位信息', VxeNotifyType.warning);
    return;
  }
  const url = '/lis/cri/noticeStep/deleteNoticeStepList';
  proxy.$http
      .post(url, selectRows)
      .then((res: any) => {
        getNoticeStepList();
        VxeMessage(res.status.msg, VxeNotifyType.success);
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}
// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  (proxy.$refs.sysReleaseTable as any).setCurrentRow(row);
  Object.assign(form, row);
  Object.assign(sysReleaseForm, row);
};
// 新建&重置
function add() {
  Object.keys(sysReleaseForm).forEach((key) => {
    switch (typeof sysReleaseForm[key]) {
      case 'string':
        sysReleaseForm[key] = '';
        break;
      case 'number':
        sysReleaseForm[key] = 1;
        break;
    }
  });
}

// 保存
function save() {
  let  url = '/lis/cri/noticeStep/saveOrUpdateNoticeStep';
  proxy.$http
      .post(url, sysReleaseForm)
      .then((res: any) => {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        getNoticeStepList();
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}

// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getNoticeStepList();
  }
}

</script>
<style lang="scss" scoped>
#LabApplyItem {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;
      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
      }
      .el-tab-pane {
        height: 100%;
        .area {
          background-color: $base-white;
          // 附加按钮间距
          .button-blue,
          .button-red {
            margin: 5px 0 5px 5px;
          }
          .leftTable {
            height: calc(100% - 40px);
            // .vxe-table--render-wrapper {
            //   height: 100%;
            //   .vxe-table--main-wrapper {
            //     height: 100%;
            //     .vxe-table--body-wrapper {
            //       height: calc(100% - 26px) !important;
            //     }
            //   }
            // }
            // .vxe-table--render-default {
            //   height: 100%;
            // }
          }

          // 右侧基本信息表单
          .baseForm {
            .el-row {
              margin-left: 0 !important;
              margin-right: 0 !important;
            }
            .form-footer {
              .el-form-item__content {
                margin-left: 120px !important;
              }
            }
            .el-form-item--large {
              margin-bottom: 10px;
            }
            .el-radio {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
